<script setup lang="ts">
import { ref } from "vue";
const a: number[] = [1, 2, 3, 4, 5];
const b: string = "我是一段文字xxx";
const c: string = "<h3 style='color: red'>支持v-html</h3>";
const d: boolean = false;
const handleClick = () => {
  console.log("点击了xxxx");
};
const id: string = "app1";
const style = {
  color: "#008c8c",
};
const inputVal = ref("1324");
const arr: string[] = ["vue", "react", "ag"];
</script>

<template>
  <h2>
    {{ a.map((item) => ({ num: item })) }}
    <h3 v-text="b"></h3>
    <h3 v-html="c"></h3>
    <div>
      <h3 v-if="d">v-if为真</h3>
      <h3 v-else>v-if为假</h3>
    </div>
    <button @click="handleClick">尽情的点击我</button>
    <h2 :id="id" :style="style" :class="['a', 'b']">v-bind</h2>
    <input v-model="inputVal" type="text" />
    <h3>{{ inputVal }}</h3>
    <ul>
      <li v-for="item in arr" :key="item">{{ item }}</li>
    </ul>
  </h2>
</template>

<style scoped>
.a {
  font-weight: 100;
}
.b {
  border: 1px solid #ccc;
}
</style>
